<template>
	<view class="min-vh-100 bg-theme flex-col  w-100">
		<view class="  brs-12 mt-12  hh position-relative">
			<view class="d-flex flex-column px-3 reserva">
				<view class="card h-100  pt-12">
					<view class="d-flex justify-content-between align-items-center card-top px-3 py-2 ">
						<view class="font-600 ellipsis-line w-0 flex-1 text-222426">
							{{card.name||'-'}}
						</view>
						<!-- 			<view class="d-flex font-600 text-666D73 align-items-baseline">
							<view class="">￥</view>
							<view class=" font-24 text-theme">{{card.price}}</view>
						</view> -->
					</view>
					<view class="bg-white d-flex content w-100">
						<view class="d-flex justify-content-between flex-1">
							<view class="pic d-flex flex-column  align-items-center pe-2">
								<view class="d-flex align-items-baseline">
									<view class="text-theme font-600 font-28">
										{{card.total_hour||0}}
									</view>
									<view class="font-12 text-666D73">
										小时
									</view>
								</view>
								<view class="font-14 font-600 text-666D73">
									总时长
								</view>
							</view>
							<view class="d-flex justify-content-between flex-1 align-items-center">
								<view class="detail ps-12">
									<view class="d-flex font-14 font-500 text-AAB5BF align-items-center pb-1">
										<view class="">
											适用门店：
										</view>
										<view class="font-14 font-600 text-222426">
											{{card.display_store_name||'-'}}
										</view>
									</view>
									<!--
									<view class="d-flex font-14 font-500 text-AAB5BF align-items-center pb-1">
										<view class="">
											适用教室：
										</view>
										<view class="font-14 font-600 text-222426">
											{{card.display_room_name}}
										</view>
									</view>
									-->
									<view class="d-flex font-14 font-500 text-AAB5BF align-items-center pb-1">
										<view class="">
											剩余时长：
										</view>
										<view class="font-14 font-600 text-222426">
											{{(card.total_hour - card.hasconsumedhour ) ||'-'}}小时
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-col section_2">
			<view class="group_1">
				<u-tabs active-color="#FFFFFF" bg-color="#D85886" bar-width="112" inactive-color="#F3F3F3"
					font-size="28" :list="tabs" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
		</view>

		<!-- 充值明细 -->
		<view class="flex-col  pb-4 pt-12" v-show="current === 0">
			<view class="brs-12 bg-white mx-3 cards">
				<template>
					<view class="text-666D73 font-14 px-3  border-line">
						<!-- 					<view class="  pb-2 pt-4">
							<text class="font-500">销售价格：</text><text
								class=" font-600 text-222426">{{card.price}}元</text>
						</view> -->
						<view class="  pb-2 pt-4 ">
							<text class="text-white">有</text> <text class="font-500">有效期：</text><text
								class="font-600 text-222426">{{card.service_start|setTime('YYYY-MM-DD')}} 至
							</text> <text
								class="font-600 text-222426 ps-1">{{card.service_end|setTime('YYYY-MM-DD')}}</text>

						</view>
						<!--
						<view class="pb-2 flex-row">
							<text class="font-500">适用门店：</text>
							<text class="font-600 text-222426">{{card.store_list_string}}</text>
						</view>
						-->
						<view class="pb-2 " style="display: flex;">
							<view class="font-500">适用教室：</view>
							<view style="flex: 1;" class="font-600 text-222426">
								<view style="padding-bottom: 6rpx;" v-for="item,index in card.rooms_list" :key="indexx">
									{{item}}
								</view>
							</view>
						</view>
						<view class="pb-2 ">
							<text class="font-500">累积时长：</text><text
								class="font-600 text-222426">{{card.total_hour}}小时</text>
						</view>
						<view class="pb-2 ">
							<text class="font-500">当前剩余：</text><text
								class="font-600 text-222426">{{card.total_hour - card.hasconsumedhour}}小时</text>
						</view>
					</view>
				</template>
			</view>
		</view>

		<view class="flex-col  pb-4 pt-12" v-show="current === 1">
			<view class="brs-12 bg-white mx-3 cards">
				<template v-if="consume_list.length">
					<view class="mt-2">
						<view class="text-666D73 font-14 px-3 font-500 border-line pt-3" v-for="(v,i) in consume_list"
							:key="i">
							<view class="pb-2">
								<text>使用门店：</text><text class="font-600 text-222426">{{v.display_store_name}}</text>
							</view>
							<view class="pb-2">
								<text>使用教室：</text><text class="font-600 text-222426">{{v.display_room_name}}</text>
							</view>
							<view class="pb-2">
								<text>使用时间：</text><text
									class="font-600 text-222426 pe-1">{{v.starttime|setTime('YYYY/MM/DD HH:mm')}}</text><text
									class="font-600 text-222426">-</text> <text
									class="ps-1 font-600 text-222426">{{v.endtime|setTime('HH:mm')}}</text>
							</view>
						</view>
					</view>
				</template>
				<view class="empty d-flex justify-content-center flex-column align-items-center h-100" v-else>
					<image src="../../static/imgs/empty.png" class="img" />
					<view class="text-AAB5BF mt-1 pt-3">暂时没有数据</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cardData
	} from '../../common/commonData.js';
	export default {
		data() {
			return {
				current: 0,
				barStyle: {
					backgroundColor: '#000000'
				},
				tabs: [{
						id: 1,
						name: '卡券详情'
					},
					{
						id: 2,
						name: '使用明细'
					}
				],
				card: {},
				consume_list: []
			};
		},
		onLoad(options) {
			let id = options.id
			this.$u.api.getUserCardDetail({
					id: id
				})
				.then((res) => {
					if (1 == res.code) {
						this.card = res.data.card
						this.consume_list = res.data.consume_list
					}
				})
		},
		methods: {
			change(index) {
				this.current = index;
			},
		}
	};
</script>

<style scoped lang="scss">
	.reserva {
		>view:last-child {
			padding-bottom: 40rpx;
		}
	}

	.card {
		&-top {
			background-color: #F692B6;
			border-radius: 12px 12px 0 0;
		}

		.content {
			padding: 40rpx 32rpx;
			border-radius: 0 0 12px 12px;

			.pic {
				border-right: 2rpx solid #F5F7F8;
			}

		}
	}

	.cards {
		min-height: 60vh;

		>view {
			>view:last-child {
				border: none;
			}
		}

		.empty {
			padding-top: calc(30vh - 244rpx);
		}

		image {
			width: 288rpx;
			height: 304rpx;
		}

		>view:last-child {
			border: none;
		}
	}
</style>